<!-- 充值记录 -->
<template>
  <view class="widthdraw-log-wrap">
    <!-- 记录卡片 -->
    <view class="wallet-log-box ss-p-b-30">
      <view class="log-list" v-for="item in state.pagination.list" :key="item.id">
        <view class="head ss-flex ss-col-center ss-row-between">
          <view class="title">充值金额</view>
          <view class="num" :class="item.refundStatus === 10 ? 'danger-color' : 'success-color'">
            {{ fen2yuan(item.payPrice) }} 元
            <text v-if="item.bonusPrice > 0">（赠送 {{ fen2yuan(item.bonusPrice) }} 元）</text>
          </view>
        </view>
        <view class="status-box item ss-flex ss-col-center ss-row-between">
          <view class="item-title">支付状态</view>
          <view
            class="status-text"
            :class="item.refundStatus === 10 ? 'danger-color' : 'success-color'"
          >
            {{ item.refundStatus === 10 ? '已退款' : '已支付' }}
          </view>
        </view>
        <view class="time-box item ss-flex ss-col-center ss-row-between">
          <text class="item-title">充值渠道</text>
          <view class="time ss-ellipsis-1">{{ item.payChannelName || '微信支付' }}</view>
        </view>
        <view class="time-box item ss-flex ss-col-center ss-row-between">
          <text class="item-title">充值单号</text>
          <view class="time"> {{ item.payOrderChannelOrderNo || item.id }} </view>
        </view>
        <view class="time-box item ss-flex ss-col-center ss-row-between">
          <text class="item-title">充值时间</text>
          <view class="time">
            {{ formatTime(item.payTime || item.createTime) }}
          </view>
        </view>
      </view>
    </view>
    
    <!-- 空状态 -->
    <view v-if="state.pagination.total === 0" class="empty-box">
      <text class="empty-text">暂无充值记录</text>
    </view>
    
    <!-- 加载更多 -->
    <view 
      v-if="state.pagination.total > 0 && state.loadStatus === 'more'" 
      class="load-more" 
      @tap="loadMore">
      <text class="load-more-text">上拉加载更多</text>
    </view>
    <view v-if="state.pagination.total > 0 && state.loadStatus === 'noMore'" class="load-more">
      <text class="load-more-text">没有更多了</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      state: {
        pagination: {
          list: [],
          total: 0,
          pageNo: 1,
          pageSize: 5,
        },
        loadStatus: 'more',
      },
    }
  },
  onLoad() {
    this.getLogList();
  },
  onReachBottom() {
    if (this.state.loadStatus === 'noMore') {
      return;
    }
    this.loadMore();
  },
  onPullDownRefresh() {
    this.state.pagination.pageNo = 1;
    this.state.pagination.list = [];
    this.getLogList();
  },
  methods: {
    // 分转元
    fen2yuan(price) {
      return (Number(price) / 100).toFixed(2);
    },
    // 格式化时间
    formatTime(timestamp) {
      if (!timestamp) return '';
      const date = new Date(timestamp);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      const seconds = String(date.getSeconds()).padStart(2, '0');
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    // 获得充值记录分页
    async getLogList() {
      this.state.loadStatus = 'loading';
      const { code, data } = await this.$api.req(
        "/pay/wallet-recharge/page",
        {
          pageNo: this.state.pagination.pageNo,
          pageSize: this.state.pagination.pageSize,
        },
        "get",
        "JSON",
        false
      );
      
      if (code !== 0) {
        this.state.loadStatus = 'noMore';
        uni.stopPullDownRefresh();
        return;
      }
      
      const list = (data && data.list) || [];
      if (this.state.pagination.pageNo === 1) {
        this.state.pagination.list = list;
      } else {
        this.state.pagination.list = [...this.state.pagination.list, ...list];
      }
      this.state.pagination.total = data.total || 0;
      this.state.loadStatus = this.state.pagination.list.length < this.state.pagination.total ? 'more' : 'noMore';
      uni.stopPullDownRefresh();
    },
    // 加载更多
    loadMore() {
      if (this.state.loadStatus === 'noMore' || this.state.loadStatus === 'loading') {
        return;
      }
      this.state.pagination.pageNo++;
      this.getLogList();
    }
  }
}
</script>

<style lang="scss" scoped>
.widthdraw-log-wrap {
  min-height: 100vh;
  background: #f5f5f5;
}

// 记录卡片
.wallet-log-box {
  padding: 0 30rpx;
}

.log-list {
  min-height: 213rpx;
  background: #fff;
  margin-bottom: 10rpx;
  padding-bottom: 10rpx;
  border-radius: 10rpx;
  overflow: hidden;

  .head {
    padding: 0 35rpx;
    height: 80rpx;
    border-bottom: 1rpx solid #eee;
    margin-bottom: 20rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .title {
      font-size: 28rpx;
      font-weight: 500;
      color: #333;
    }

    .num {
      font-size: 28rpx;
      font-weight: 500;
    }
  }

  .item {
    padding: 0 30rpx 10rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .item-title {
      width: 180rpx;
      font-size: 24rpx;
      font-weight: 400;
      color: #666;
    }

    .status-text {
      font-size: 24rpx;
      font-weight: 500;
    }

    .time {
      font-size: 24rpx;
      font-weight: 400;
      color: #c0c0c0;
      flex: 1;
      text-align: right;
    }
  }
}

.warning-color {
  color: #faad14;
}

.danger-color {
  color: #ff4d4f;
}

.success-color {
  color: #67c23a;
}

.empty-box {
  padding: 100rpx 0;
  text-align: center;

  .empty-text {
    font-size: 28rpx;
    color: #999;
  }
}

.load-more {
  padding: 30rpx 0;
  text-align: center;

  .load-more-text {
    font-size: 24rpx;
    color: #999;
  }
}
</style>
